
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTTP请求头通常包含哪些信息？ - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>HTTP请求头通常包含哪些信息？ - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">HTTP请求行由哪三个核心部分组成？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HTTP请求行由三部分组成：1. 请求方法（如GET、POST）；2. 请求路径（指定资源的URL）；3. HTTP版本（如HTTP/1.1）。</div>
          </div>
          <div class="card-source">来源: 1. 请求行</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在HTTP请求中，`Host` 和 `User-Agent` 这两个请求头的作用分别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Host` 请求头用于指定请求目标的服务器域名和端口号。`User-Agent` 请求头用于标识发出请求的客户端软件（如浏览器）的类型和版本。</div>
          </div>
          <div class="card-source">来源: 2.1. Host, 2.2. User-Agent</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">请解释 `Accept`、`Accept-Encoding` 和 `Accept-Language` 这三个请求头在内容协商中的不同职责。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Accept` 指定客户端能接受的媒体类型（MIME类型）；`Accept-Encoding` 指示客户端能理解的内容编码方式（如gzip压缩）；`Accept-Language` 指定客户端偏好的自然语言和地区，用于内容本地化。</div>
          </div>
          <div class="card-source">来源: 2.3. Accept, 2.4. Accept-Encoding, 2.5. Accept-Language</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">`Authorization` 和 `Cookie` 请求头如何分别用于用户身份识别和会话管理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Authorization` 请求头包含用于认证的凭据，如基本认证或令牌，用于验证用户身份。`Cookie` 请求头包含客户端存储的Cookies数据，服务器可以通过它来识别用户会话。</div>
          </div>
          <div class="card-source">来源: 2.7. Authorization, 2.8. Cookie</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当一个HTTP请求（例如POST请求）包含请求体时，`Content-Type` 和 `Content-Length` 请求头的作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Content-Type` 用于指定请求体的媒体类型（例如 application/json），告知服务器其格式。`Content-Length` 则指定请求体的长度（以字节为单位），告知服务器其大小。</div>
          </div>
          <div class="card-source">来源: 2.9. Content-Type, 2.10. Content-Length</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">HTTP缓存机制中，`If-Modified-Since` 和 `If-None-Match` 这两个请求头是如何工作的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它们都用于缓存验证。`If-Modified-Since` 会附带一个时间戳，询问服务器资源在此时间之后是否被修改过。`If-None-Match` 会附带一个ETag值，询问服务器资源的ETag是否与该值不匹配。如果条件不满足，服务器可以返回304 Not Modified，让客户端使用本地缓存。</div>
          </div>
          <div class="card-source">来源: 3.2. If-Modified-Since, 3.3. If-None-Match</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">`Range` 请求头的主要用途是什么？请举例说明。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Range` 请求头用于请求获取部分资源的特定范围。这常用于大文件的分段下载或断点续传。例如，`Range: bytes=200-1000` 表示客户端希望获取资源的第200到1000字节。</div>
          </div>
          <div class="card-source">来源: 3.1. Range</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何通过HTTP请求头来识别一个请求是异步请求（AJAX）？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以通过检查 `X-Requested-With` 请求头来识别。当其值为 `XMLHttpRequest` 时，通常表示这是一个异步请求。</div>
          </div>
          <div class="card-source">来源: 2.12. X-Requested-With</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">`Connection` 请求头的作用是什么？它最常见的值 `keep-alive` 代表什么意思？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Connection` 请求头用于控制连接的管理方式。其常见值 `keep-alive` 表示客户端希望与服务器保持长连接，以便在同一连接上发送后续请求，从而避免重复建立TCP连接的开销。</div>
          </div>
          <div class="card-source">来源: 2.6. Connection</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
